﻿@page "/dropdown"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DropDown
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DropDown</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DropDown
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>DropDown</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownBindValue">
    <DropDownBindValue />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DropDown using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownChangeEvent">
    <DropDownChangeEvent />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define Text and Value properties
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownTextValueProperties">
    <DropDownTextValueProperties />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DropDown with template
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownTemplate">
    <DropDownTemplate />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Disable specific item
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownDisabledItem">
    <DropDownDisabledItem />
</RadzenExample>

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Clear selected item
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownClear">
    <DropDownClear/>
</RadzenExample>
